<template>
  <div>
    <div style="margin: 20px 10px;display: flex;justify-content: center;font-size:20px;color: #1E90FF">考试列表</div>

    <div style="overflow: auto">
      <div class="infinite-list-wrapper">
        <div class="list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled" :infinite-scroll-distance="10">
          <transition-group
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__bounceInDown"
            leave-active-class="animate__backOutUp">

            <div style="margin-top: 15px" class="content list-item" key="item.id"
                 v-for="item in tableData"
                 :key="item.id" v-if="item">

              <div style="margin:10px 0;font-size:20px">{{ item.name }}</div>
              <div style="margin:10px 0">
                <span> {{ item.classroom }}</span>
                <span style="margin-left: 20px">  监考老师： {{ item.teacher }}</span>
                <span style="float:right;">

        <el-tag style="font-size:20px" type="success" v-if="item.state=='未开始'">{{ item.state }}</el-tag>
          <el-tag type="primary" style="font-size:20px" v-if="item.state=='进行中'">{{ item.state }}</el-tag>
        <el-tag type="warning" style="font-size:20px" v-if="item.state=='已结束'">{{ item.state }}</el-tag>
        </span>
              </div>
              <div style="margin-bottom: 10px">
                <span style="font-size:15px">考试时间： {{ item.startTime }}---{{ item.endTime }}</span>
              </div>
              <el-button style="margin-left: 0px" type="primary" @click="sign(item.id)">报名</el-button>
              <el-button style="margin-left: 20px" type="success" @click="doPaper(item)" v-if="item.enable">开始考试
              </el-button>
            </div>
          </transition-group>
        </div>
        <p v-if="noMore" style="color: gray;text-align: center">没有更多了</p>

      </div>
      <br/>
    </div>
<!--    <div v-if="tableData.length===0">-->
<!--      <el-empty description="暂无考试"></el-empty>-->
<!--    </div>-->

  </div>
</template>

<script>
import request from "@/utils/request";
import "animate.css";

export default {
  name: "Home",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 4,
      count: 0,
      name: '',
      form: {
        userId: '',
        examId: ''
      },
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      paperId: null,
      loading: false,
      tableData1: [],
      finished: false,
    }
  },

  /*beforeRouteLeave(to, from, next) {
    this.$confirm("你确定要离开此页面", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
      .then(() => {
        next(true);
      })
      .catch(() => {
        next(false);
      });
  },
*/
  computed: {
    noMore() {
      return this.total >= this.tableData1.total
    },
    disabled() {
      return this.noMore || this.loading
    }
  },


  methods: {
    //考试
    doPaper(examId) {
      let currentDate = new Date();
      let start = new Date(examId.startTime)

      if (start >= currentDate) {
        this.$message.warning("考试未到时间")
        return
      }
      this.request.get('studentPaper/selectIsDoPaper/' + examId.id).then(r => {
        if (r.code != 200) {
          this.$message.error(r.msg)
        } else {
          this.request.get("/examPaper/exam/" + examId.id).then(res => {
            if (res.data) {
              this.$router.push('/front/paper?examId=' + examId.id)
            } else {
              this.$message.error("考试尚未出卷请联系管理员")
            }
          })
        }
      })
    },

    //处理日期格式
    dateFormat(row) {
      const daterc = row
      if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      }
    },

    sign(val) {
      this.form.userId = this.user.id;
      this.form.examId = val;
      this.request.post('/sign/save', this.form).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '报名成功'
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.msg
          })
        }
      })

    },

    load() {
      this.loading = true
      this.request.get("/exam/findPage/front", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {
        res.data.records.forEach(s => {
          s.startTime = this.dateFormat(s.startTime)
          s.endTime = this.dateFormat(s.endTime)
        })
        this.tableData1 = res.data
        this.tableData = this.tableData.concat(res.data.records)
        this.total += this.pageSize
        // this.total=(this.pageSize-(this.pageSize*this.pageNum-res.data.total))+this.pageSize*(pageNum-1)
        this.loading = false
        this.pageNum++
        if (res.data.records.length < this.pageSize || res.pages == res.current) {
          this.finished = true
        }
      })
    }
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.load()
  },
  handleCurrentChange(val) {
    this.pageNum = val
    this.load()
  }
}
</script>

<style scoped>

.content {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  border-radius: 10px;
  margin-bottom: 100px;
  margin-top: 74px;
  width: 800px;
  margin: 0 auto

}

@media screen and (max-width: 376px) {
  .content {
    width: 95%;
    margin: 10px;
    overflow-x: hidden;

  }
}

@media only screen and (min-width: 655px) and (max-width: 1200px) {
  .content {
    width: 80%;
  }
}

@media only screen and (min-width: 377px) and (max-width: 655px) {
  .content {
    width: 90%;
  }
}
</style>
